<template>
	<div class="padding20">
		<el-row style="margin-bottom: 7px">
			<el-form :inline="true" :model="queryForm" @submit.native.prevent @keyup.enter.native="queryList">
				<el-form-item>
					<el-input prefix-icon="el-icon-search" v-model="queryForm.username" autocomplete="off" placeholder="请输入登录名" clearable></el-input>
				</el-form-item>

				<el-form-item>
					<el-input prefix-icon="el-icon-search" v-model="queryForm.nickName" autocomplete="off" placeholder="请输入昵称" clearable></el-input>
				</el-form-item>

				<el-form-item v-show="collapse.flag">
					<el-input prefix-icon="el-icon-search" v-model="queryForm.email" autocomplete="off" placeholder="请输入邮箱" clearable></el-input>
				</el-form-item>

				<el-form-item v-show="collapse.flag">
					<el-input prefix-icon="el-icon-search" v-model="queryForm.phone" autocomplete="off" placeholder="请输入手机号" clearable></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" size="medium" icon="el-icon-search" @click="queryList({ current: 1 })">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" icon="el-icon-refresh-left" @click="resetQueryForm">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="text" @click="handleCollapseState">
						{{ collapse.label }}
						<i :class="collapse.icon"></i>
					</el-button>
				</el-form-item>
			</el-form>
			<el-button type="primary" size="medium" icon="el-icon-plus" v-if="$tools.hasPermission('member:member:save')" @click="handleEdit()">添加</el-button>
			<div style="float: right; padding-right: 17px">
				<i class="el-icon-download" style="margin-right: 10px; cursor: pointer" @click="handleExport"></i>
				<i class="el-icon-refresh" style="margin-right: 10px; cursor: pointer" @click="refresh"></i>

				<el-popover placement="bottom" width="180" trigger="click" title="列展示" popper-class="columnShows">
					<el-checkbox-group v-model="tableShowList">
						<el-checkbox v-for="item in tableList" :label="item.propName" :key="item.propName" :value="item.propName">{{ item.propDesc }}</el-checkbox>
					</el-checkbox-group>
					<i slot="reference" class="el-icon-s-operation" style="cursor: pointer"></i>
				</el-popover>
			</div>
		</el-row>
		<!-- <el-table
                ref="multipleTable"
                :data="tableData"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                border
        >
            <el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>

            <el-table-column
              v-if="$tools.isShow('username', tableShowList)"
              prop="username"
              label="登录名"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('nickName', tableShowList)"
              prop="nickName"
              label="昵称"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          <el-table-column
              v-if="$tools.isShow('avatar', tableShowList)"
              prop="avatar"
              label="头像"
              :show-overflow-tooltip="true"
              width="120px"
          >
            <template slot-scope="scope">
              <el-image
                  v-if="scope.row.avatar"
                  :src="scope.row.avatar"
                  style="width: 100px; height: 100px"
                  :preview-src-list="[scope.row.avatar]"
              />
            </template>
          </el-table-column>
            <el-table-column
              v-if="$tools.isShow('email', tableShowList)"
              prop="email"
              label="邮箱"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('phone', tableShowList)"
              prop="phone"
              label="手机号"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              :show-overflow-tooltip="true"
              v-if="activateStatus == 1 && $tools.isShow('username', tableShowList)"
            >
              <template slot-scope="scope">
                <el-tag type="success" size="mini" v-if="scope.row.status == 1">已激活</el-tag>
                <el-tag type="danger" size="mini" v-else>未激活</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              v-if="$tools.isShow('createTime', tableShowList)"
              prop="createTime"
              label="创建时间"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column label="操作" fixed="right" min-width="180">
                <template slot-scope="scope">
                    <el-button
                            v-if="$tools.hasPermission('member:member:info')"
                            size="mini"
                            plain
                            @click="handleInfo(scope.row.id)"
                    >详情</el-button
                    >
                    <el-button
                            v-if="$tools.hasPermission('member:member:edit')"
                            size="mini"
                            plain
                            @click="handleEdit(scope.row.id)"
                    >编辑</el-button
                    >
                    <el-button
                            v-if="$tools.hasPermission('member:member:delete')"
                            size="mini"
                            plain
                            type="danger"
                            @click="handleDelete(scope.row)"
                    >删除</el-button
                    >
                  <el-button
                      size="mini"
                      plain
                      @click="memberActivate(scope.row)"
                      v-if="activateStatus == 1 && scope.row.status != 1"
                  >激活</el-button
                  >
                </template>
            </el-table-column>
        </el-table> -->
		<!-- <pagination :total="page.total" :current-page="page.current" :page-size="page.size" @refreshData="queryList"></pagination> -->
		<el-table :data="tableData" row-key="id">
			<el-table-column prop="avatar" label="头像" width="120" v-if="$tools.isShow('avatar', tableShowList)">
				<template slot-scope="scope">
					<el-image v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 60px; height: 60px; border-radius: 50%;" :preview-src-list="[scope.row.avatar]" />
				</template>
			</el-table-column>
			<el-table-column v-if="$tools.isShow('username', tableShowList)" prop="username" label="登录名" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="nickName" label="用户昵称" :show-overflow-tooltip="true" v-if="$tools.isShow('nickName', tableShowList)"></el-table-column>
			<el-table-column prop="phone" label="手机号" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column v-if="$tools.isShow('email', tableShowList)" prop="email" label="邮箱" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="status" label="状态" :show-overflow-tooltip="true" v-if="activateStatus == 1 && $tools.isShow('username', tableShowList)">
				<template slot-scope="scope">
					<el-tag type="success" size="mini" v-if="scope.row.status == 1">已激活</el-tag>
					<el-button size="mini" type="text" v-else @click="memberActivate(scope.row)">未激活</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" :show-overflow-tooltip="true" v-if="$tools.isShow('createTime', tableShowList)"></el-table-column>
			<!-- <el-table-column prop="createTime" label="积分 / 余额" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="createTime" label="成交" :show-overflow-tooltip="true"></el-table-column> -->
			<!-- <el-table-column prop="createTime" label="来源" :show-overflow-tooltip="true"></el-table-column> -->
			<el-table-column label="操作" :show-overflow-tooltip="true">
				<template #default="{row}">
					<el-button v-if="$tools.hasPermission('member:member:edit')" size="mini" @click="handleEdit(row.id)" icon="el-icon-edit" type="warning" title="编辑"></el-button>
					<!-- <el-button
						v-if="$tools.hasPermission('member:member:edit')"
						size="mini"
						@click="handleFinance(row)"
						icon="el-icon-s-finance"
						type="primary"
						title="充值"
					></el-button> -->
					<el-popconfirm confirm-button-text="删除" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="确定删除吗？" @confirm="handleDelete(row)" v-if="$tools.hasPermission('member:member:delete')">
						<template #reference>
							<el-button size="mini" type="danger" icon="el-icon-delete" title="删除"></el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<br />
		<pagination :total="total" :current-page="current" :page-size="size" @refreshData="queryList"></pagination>
		<member-finance ref="MemberFinanceRef"></member-finance>
		<!-- 新增 -->
		<form-add v-if="formEditVisible" ref="formEdit" @refreshData="queryList"></form-add>
		<!-- 详情 -->
		<!-- <form-info v-if="formInfoVisible" ref="formInfo"></form-info> -->
	</div>
</template>
<script>
import { memberPage, memberDel, memberDelBatch, memberDynamicExport, memberActivate } from "@/api/member/member.js"
import { viewTableList } from "@/api/public.api.js"
import FormAdd from "./member-add.vue"
// import FormInfo from "./member-info"
import MemberFinance from "./member-finance.vue"
import FortressPagination from "@/components/fortress-pagination.vue"

import request from "@/common/request"
export default {
	data() {
		return {
			tableData: [],
			formEditVisible: false,
			formInfoVisible: false,
			queryForm: {
				username: "",
				nickName: "",
				email: "",
				phone: "",
			},
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
			collapse: {
				icon: "el-icon-arrow-down el-icon--right",
				label: "展开",
				flag: false,
			},
			tableList: [],
			tableShowList: [],
			activateStatus: 2,
			YesNoList: [],
			MemberStatusList: [],
			levelIdList: [],
			total: 0,
			current: 1,
			size: 10,
			pickerOptions: {
				shortcuts: [
					{
						text: "最近一周",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit("pick", [start, end])
						},
					},
					{
						text: "最近一个月",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit("pick", [start, end])
						},
					},
					{
						text: "最近三个月",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit("pick", [start, end])
						},
					},
				],
			},
		}
	},
	components: {
		"form-add": FormAdd,
		// "form-info": FormInfo,
		pagination: FortressPagination,
		MemberFinance,
	},
	created() {
		this.initTableList()
		this.queryList()
		this.getSettingConfig()
	},
	methods: {
		memberActivate(row) {
			this.$confirm("确认激活该会员?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				memberActivate(row.id).then(resp => {
					if (resp.code == 0) {
						this.$message({
							type: "success",
							message: "操作成功!",
						})
						this.queryList()
					} else {
						this.$msg({
							message: resp.msg,
							type: "error",
						})
					}
				})
			})
		},
		async getSettingConfig() {
			const { data } = await request("get", "/system/configApi/list")
			const memberRegister = data.find(item => item.bindCode === "MEMBER_REGISTER")
			if (memberRegister) {
				this.activateStatus = memberRegister.paramMap.activateStatus
			}
		},
		refresh() {
			this.tableData = []
			this.queryList({ current: 1 })
		},
		//查询表格数据
		queryList(page) {
			if (page) {
				this.page.current = page.current ? page.current : this.page.current
				this.page.size = page.size ? page.size : this.page.size
			}
			this.queryForm.current = this.page.current
			this.queryForm.size = this.page.size
			memberPage(this.queryForm).then(resp => {
				if (resp.code == 0) {
					this.tableData = resp.data.records
					this.page.total = resp.data.total
					//查询页大于总页数，重新查询
					let cu = this.page.total % this.page.size == 0 ? parseInt(this.page.total / this.page.size) : parseInt(this.page.total / this.page.size + 1)
					if (cu > 0 && this.page.current > cu) {
						this.queryList({ current: cu })
					}
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		//打开编辑窗口
		handleEdit(id) {
			if (id) {
				// 编辑
				this.$router.push("/member/member-new-edit?id=" + id)
				return
			}
			// 新增
			this.formEditVisible = true
			this.$nextTick(() => {
				this.$refs.formEdit.init(id)
			})
		},
		//打开详情窗口
		handleInfo(id) {
			this.formInfoVisible = true
			this.$nextTick(() => {
				this.$refs.formInfo.init(id)
			})
		},
		//删除
		handleDelete(row) {
			this.$confirm("确认删除该记录, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					memberDel(row.id).then(resp => {
						if (resp.code == 0) {
							this.$message({
								type: "success",
								message: "操作成功!",
							})
							//判断是否最后一页的最后一条记录
							let totalPages = (this.page.total - 1) % this.page.size == 0 ? (this.page.total - 1) / this.page.size : (this.page.total - 1) / this.page.size + 1
							if (this.page.current > totalPages && this.page.current != 1) {
								this.page.current = this.page.current - 1
							}
							this.queryList()
						} else {
							this.$msg({
								message: resp.msg,
								type: "error",
							})
						}
					})
				})
				.catch(() => {})
		},
		//批量删除
		handleDeleteBatch() {
			let checkedRow = this.$refs.multipleTable.selection
			if (checkedRow.length > 0) {
				let ids = []
				checkedRow.forEach(item => {
					ids.push(item.id)
				})
				this.$confirm("确认删除该记录, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						memberDelBatch(ids).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								//判断是否最后一页的最后一条记录
								let totalPages = (this.page.total - checkedRow.length) % this.page.size == 0 ? (this.page.total - checkedRow.length) / this.page.size : (this.page.total - checkedRow.length) / this.page.size + 1
								if (this.page.current > totalPages && this.page.current != 1) {
									this.page.current = this.page.current - 1
								}
								this.queryList()
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					})
					.catch(() => {})
			} else {
				this.$msg({
					message: "请选择数据进行删除",
					type: "error",
				})
			}
		},
		//重置查询框
		resetQueryForm() {
			this.queryForm = {
				username: "",
				nickName: "",
				email: "",
				phone: "",
			}
		},
		//切换查询条件收缩框
		handleCollapseState() {
			this.collapse.flag = !this.collapse.flag
			if (this.collapse.flag) {
				this.collapse.icon = "el-icon-arrow-up el-icon--right"
				this.collapse.label = "收起"
			} else {
				this.collapse.icon = "el-icon-arrow-down el-icon--right"
				this.collapse.label = "展开"
			}
		},
		//视图表格列表初始化
		initTableList() {
			viewTableList("castle_member").then(resp => {
				if (resp.code == 0) {
					this.tableList = resp.data
					this.tableList.forEach(item => {
						this.tableShowList.push(item.propName)
					})
				}
			})
		},
		//可见字段excel导出
		handleExport() {
			if (!this.tableShowList || this.tableShowList.length < 1) {
				this.$msg({
					message: "请选择要导出的列",
					type: "error",
				})
				return
			}
			let colNum = 1
			let headerList = []
			this.tableShowList.forEach(item => {
				let nameData = this.tableList.find(item2 => {
					return item2.propName == item
				})
				let name = ""
				if (nameData && nameData.propDesc) {
					name = nameData.propDesc
				} else {
					name = "未定义字段" + colNum++
				}
				headerList.push({ name: name, code: item })
			})
			memberDynamicExport({ headerList: headerList, dto: this.queryForm })
		},
	},
}
</script>
<style scoped></style>
